<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
        }

    </style>

    <script>

        window.onload = function () {
            /*
                拖拽的功能：
                    1.当在被拖拽的元素上按下鼠标，功能开始
                    2.当鼠标移动时，被拖拽的元素跟随鼠标一起移动
                    3.当鼠标松开时，元素固定在当前位置不动
                    4.只能左键拖拽
                需要的事件：
                    鼠标按下 mousedown
                    鼠标移动 mousemove
                    鼠标松开 mouseup

                问题：
                    如何确保鼠标指针和元素的相对位置保持不变？

                问题：
                    在浏览器中，当我们拖着一个文字（内容）移动时，
                        浏览器会自动在搜索引擎查找相关内容，这个是浏览器对拖拽的默认行为

                要求：
                    1.将以下代码修改为addEventListener()
                    2.拖拽可以适用于多个元素
             */

            //为被拖拽的元素绑定一个鼠标按下的事件
            var box1 = document.getElementById('box1');
            function drag(box1){
                box1.addEventListener('mousedown',function (ev) {
                    if (ev.button === 0){
                        var top = ev.offsetY;
                        var left = ev.offsetX;
                        function addmosemove(ev){
                            box1.style.left = ev.clientX - left + 'px';
                            box1.style.top = ev.clientY - top + 'px';
                        }
                        document.addEventListener('mousemove',addmosemove,false);
                        function remove(){
                            document.removeEventListener('mousemove',addmosemove,false);
                            document.removeEventListener('mouseup',remove,false);
                        }
                        document.addEventListener('mouseup',remove,false);
                        return false;
                    }

                },false)
            }
            drag(box1);
            drag(box2);


        };

    </script>
</head>
<body>
<div id="box1"></div>


<div id="box2" style="width: 100px;height: 100px;background-color: #ff0; position:absolute; top: 200px;left: 300px;"></div>

</body>
</html>